<template>

  <el-dialog :visible.sync="addVisible" @close="close" width="75%" :show-close='false' class="sample-detail-dialog"
    append-to-body :closeOnClickModal='false'>
    <span slot="title" class="dialog-title">
      样品详情
      <el-button size="mini" @click="close" class="popupClose">关闭</el-button>
    </span>
    <el-form label-width="110px" :inline="false" class="demo-form-inline sampleDetailForm" :model="sampleDetailForm"
      ref="sampleDetailForm">
      <el-form-item label="样品编号" prop="code">
        <el-col :span="22">
          <el-input placeholder="样品编号" size="mini" v-model="sampleDetailForm.code" disabled></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="样品名称" prop="name">
        <el-col :span="22">
          <el-input placeholder="样品名称" size="mini" v-model="sampleDetailForm.name" disabled></el-input>
        </el-col>
      </el-form-item>
      
      <el-form-item label="采样人" prop="factManName">
        <el-col :span="22">
          <el-input placeholder="采样人" size="mini" v-model="sampleDetailForm.factManName" disabled></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="采样日期" prop="factDate">
        <el-col :span="22">
          <el-date-picker v-model="sampleDetailForm.factDate" type="datetime" size="mini" style="width:100%;"
            placeholder="选择日期" :clearable = "false" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change = "updateSampleDate" :disabled="sampleDetailForm.status != 515">
          </el-date-picker>
          <!--<el-input placeholder="采样日期" size="mini" v-model="sampleDetailForm.factDate" disabled></el-input>-->
        </el-col>
      </el-form-item>
      <el-form-item label="接收人" prop="acceptManName">
        <el-col :span="22">
          <el-input placeholder="接收人" size="mini" v-model="sampleDetailForm.acceptManName" disabled></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="接收时间" prop="acceptDate">
        <el-col :span="22">
          <el-date-picker v-model="sampleDetailForm.acceptDate" type="datetime" size="mini" style="width:100%;"
            placeholder="选择日期" :clearable = "false" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change = "updateSampleDate" :disabled="sampleDetailForm.status != 515">
          </el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="样品性状" prop="propertyTwo">
        <el-col :span="22">
          <el-input placeholder="样品性状" size="mini" v-model="sampleDetailForm.propertyTwo" disabled></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="样品状态" prop="status">
        <el-col :span="22">
          <el-select v-model="sampleDetailForm.status" placeholder="请选择" size="mini" disabled style="width:100%;">
            <el-option v-for="item in taskSampleStatus" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <!--<el-input placeholder="样品状态" size="mini" v-model="sampleDetailForm.status" disabled></el-input>-->
        </el-col>
      </el-form-item>

    </el-form>

    <div class="elTab">
      <el-tabs style="width: 100%;" v-model="activeName">
        <el-tab-pane label="容器信息" name="first">
          <el-table :data="sampleDetailForm.sampleDetailBeans" style="width: 100%" size="mini" class="tableCon" height="calc(100% - 33px)">
            <el-table-column label="序号" min-width="50px">
              <template slot-scope="scope">
                {{scope.$index+1}}
              </template>
            </el-table-column>
            <el-table-column property="bottleName" label="容器材质" min-width="140px">
            </el-table-column>
            <el-table-column property="capacity" label="容器容量" min-width="100px">
            </el-table-column>
            <el-table-column property="number" label="容器数量" min-width="100px">
            </el-table-column>
            <el-table-column property="doCopy" label="是否留样" min-width="70px">
              <template slot-scope="scope">
                {{scope.row.doCopy?'留样':'不留样'}}
              </template>
            </el-table-column>
            <el-table-column property="address" label="留样位置" min-width="140px" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{scope.row.doCopy?scope.row.address:'---'}}
              </template>
            </el-table-column>
            <el-table-column property="expireDate" label="有效期" min-width="140px">
              <template slot-scope="scope">
                {{scope.row.expireDate == undefined || scope.row.expireDate == null || scope.row.expireDate == ""  ? "---" : scope.row.expireDate.substring(0,16)}}
              </template>
            </el-table-column>
            <el-table-column property="saveTime" label="保存时间(h)" min-width="100px">
              <template slot-scope="scope">
                {{scope.row.saveTime == undefined || scope.row.saveTime == null || scope.row.saveTime == ""  ? "---" : scope.row.saveTime}}
              </template>
            </el-table-column>
            <el-table-column property="media" label="保存剂" min-width="100px">
              <template slot-scope="scope">
                {{scope.row.media == undefined || scope.row.media == null || scope.row.media == ""  ? "---" : scope.row.media}}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="采样位置" name="third">
          <div style="width: 100%;height: 96%;text-align: center;color: #888;line-height:50px;" id="myMap">

          </div>
        </el-tab-pane>
        <el-tab-pane label="附件" name="second">
          <!-- <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
            :file-list="fileList" >
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
            </div>
          </el-upload> -->
          <el-upload
            action="#"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
             :file-list="fileList">
             <div slot="file" slot-scope="{file}">
                 <img class="el-upload-list__item-thumbnail"  :src="file.url" alt="" >
                 <span class="el-upload-list__item-actions">
                   <span class="el-upload-list__item-delete"
                       @click="handleDownload(file)" >
                       <i class="el-icon-download"></i>
                     </span>
                  </span>
              </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" append-to-body class = "imgDialog">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-tab-pane>
      </el-tabs>
    </div>

  </el-dialog>

</template>

<script>
  import {
    mapState
  } from 'vuex'
  import $ from 'jquery'

  export default {
    data() {
      return {
        activeName: "first",
        sampleDetailForm: {

        },
        bottleList: [],
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        fileList:[]

      }
    },
    computed: {
      ...mapState(['enableStatus', 'tableHeightA', 'yesorno', 'taskSampleStatus']),
    },
    watch: {
      addVisible(val, oldVal) {
        if (val) {
          console.log(this.sampleInfo)
          this.sampleDetailForm = this.sampleInfo

        }
      },
      activeName(val) {
        if (val == 'second') {
          this.readIamges();
        }
        if(val == 'third'){
          this.initMap();
        }
      }

    },
    props: ['addVisible', 'sampleInfo'],
    mounted() {
      // this.loadScript();
      console.log(this.$route.name)
    },
    methods: {
      initMap(){
        if(this.sampleDetailForm.lat == undefined || this.sampleDetailForm.lat == null ||this.sampleDetailForm.lat == ""|| this.sampleDetailForm.lng == ""){
          document.getElementById("myMap").innerHTML = '无采样位置信息!';
          return;
        }
        var center=new qq.maps.LatLng(this.sampleDetailForm.lat, this.sampleDetailForm.lng);
        var poiaddress = this.sampleDetailForm.poiaddress;
        var map=new qq.maps.Map(document.getElementById("myMap"),{
            center:center,
            zoom:13,
            disableDefaultUI: true,
            mapStyleId: 'style1'
        });
        //添加定时器
        setTimeout(function(){
            var marker=new qq.maps.Marker({
                position:center,
                animation:qq.maps.MarkerAnimation.DROP,
                map:map
            });
           var infoWin = new qq.maps.InfoWindow({
               map: map
           });
           infoWin.open();
           infoWin.setContent(poiaddress);
           infoWin.setPosition(map.getCenter());
            //marker.setAnimation(qq.maps.Animation.DROP);
        },200);
      },
      // 动态加载地图
     loadScript() {
       //创建script标签
       var script = document.createElement("script");
       //设置标签的type属性
       script.type = "text/javascript";
       //设置标签的链接地址
       script.src = "https://map.qq.com/api/js?v=2.exp&key=yourApiKey&callback=init";
       //添加标签到dom
       document.body.appendChild(script);


     },

      // formatterDate(row, column, cellValue) {
      //   if(cellValue == undefined){
      //    return "---"
      //   }else{

      //    return this.util.formatterDate({ cellValue: cellValue })
      //   }

      //  },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
         window.open(file.url + '?token=' + token)
      },
      // handleRemove(file) {
      //   console.log(file);
      // },
      close() {
        this.activeName = 'first';
        this.$emit("update:addVisible", false)

      },
      updateSampleDate(val){
        var data = {
          id:this.sampleDetailForm.id,
          factDate:this.sampleDetailForm.factDate,
          acceptDate:this.sampleDetailForm.acceptDate,
          status:this.sampleDetailForm.status
        }
        this.$http({
          method: 'post',
          apiUrl: '/detection/updateSampleDate.htm',
          params:data,
          isJson: true,
        }).then(res => {
          if (res.code == 0) {
            this.$notify({
              title:"成功",
              message:"修改成功!",
              type:"warning"
            })
            this.$parent.init();
          }
         })
      },
      // 样品详情
      readIamges() {
        this.$http({
          method: 'post',
          apiUrl: '/detection/readSampleImages.htm',
          params: {
            id: this.sampleInfo.id
          },
          isJson: false,
        }).then(res => {
          if (res.code == 0) {
              this.fileList = [];
              for(var i in res.data){
                var obj = {};
                obj.url = res.data[i];
                this.fileList.push(obj)
              }
              console.log(this.fileList)

          }
        })

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .sample-detail-dialog .el-dialog {
    height: 75%;
    margin-top: 12vh !important;
  }

  .sample-detail-dialog .el-dialog .el-dialog__body {
    height: calc(100% - 45px);
    padding: 10px;
  }

  .sample-detail-dialog .el-dialog .el-form-item {
    margin-bottom: 5px;
    width: 49%;
    display: inline-block;
  }

  .sample-detail-dialog .el-dialog .sampleDetailForm {
    height: 190px;
  }

  .sample-detail-dialog .el-dialog .elTab {
    height: calc(100% - 190px)
  }

  .sample-detail-dialog .el-dialog .elTab .el-tabs {
    height: 100%
  }

  .sample-detail-dialog .el-dialog .elTab .el-tabs .el-tabs__content {
    height: calc(100% - 40px)
  }

  .sample-detail-dialog .el-dialog .elTab .el-tabs .el-tabs__content .el-tab-pane {
    height: 100%
  }

  .sample-detail-dialog .el-dialog .elTab .el-upload--picture-card,
  .sample-detail-dialog .el-dialog .elTab .el-upload-list__item-delete {
    display: none
  }
  .sample-detail-dialog .imgDialog {

  }
</style>
